<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  <title>我的简历</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      background: #eee;
      margin: 20px 0;
    }

    article {
      width: 21cm;
      min-height: 29.7cm;
      background: white;
      margin: 0 auto;
      overflow: auto;
      padding: 1em;
    }
  </style>
  <style media="print">
    body {
      margin: 0;
    }

    .page2 {
      page-break-before: always;
      margin-top: 30px;
    }
  </style>
  <style>
    body {}

    p {
      margin: .3em 0;
    }

    h1 {
      font-size: 25px;
      margin-top: 0;
    }

    h4,
    h5,
    h6 {
      font-weight: normal;
    }

    ol,
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    strong {
      font-weight: normal;
      color: #f60;
    }

    a {
      color: #999;
      text-decoration: none;
      border-bottom: 1px solid;
    }

    p,
    li {
      color: #666;
    }

    strong {
      font-weight: normal;
    }

    h3,
    h4,
    h5,
    h6 {
      margin: 0;
    }

    .bio {
      position: relative;
    }

    .bio img {
      position: absolute;
      top: 0;
      right: 0;
    }
  </style>

  <style>
    .projects {}

    .projects p {
      color: #666;
    }

    .projects strong {
      color: #f60;
    }

    .projects>ol {
      margin-top: 0;
      list-style-position: inside;
      padding: 0;
    }

    .projects>ol>li {
      margin-bottom: 24px;
    }

    .projects>ol>li>header {
      display: flex;
      justify-content: space-between;
    }

    .projects>ol>li h3 {
      display: inline-block;
    }
  </style>
  <style>
    .skills {}

    #skills {

      width: 500px;
      height: 270px;
    }
    @media print {
      #skills{display:none;}
    }


    .skills>.wrapper {
      display: flex;
      justify-content: space-between;
    }

    .skills>.wrapper>:first-child {
      margin-right: 24px;
    }

    .skills>.wrapper>#skills {}

    .skills>.wrapper>ul {
      color: #666;
    }

    .skills>.wrapper strong {
      color: #f60;
    }

    .skills>.wrapper>ul>li {
      line-height: 1.2;
      margin-bottom: 8px;
    }
  </style>
  <style>
    .openSource {}

    .openSource>h2 {}

    .openSource header img {
      position: absolute;
      top: 0;
      right: 0;
    }

    .openSource>ul {}

    .openSource>ul>li {
      margin-bottom: 24px;
    }

    .openSource header {
      position: relative;
      display: flex;
      justify-content: space-between;
    }

    .openSource h3 {}
  </style>
  <style>
    .jobs {}

    .jobs>h2 {}

    .jobs>ol {}

    .jobs>ol>li {
      margin: 12px 0;
    }

    .jobs header {
      display: flex;
      color: #666;
      margin-bottom: 12px;
    }

    .jobs header>h3 {
      font-size: 18px;
      color: #333;
    }

    .jobs header>h4 {
      margin-left: 1em;
      font-size: 18px;
    }

    .jobs header>span {
      font-size: 18px;
      margin-left: auto;
    }
  </style>



  <style>
    @media (max-width: 500px) {
      body {
        margin: 0;
      }

      article {
        width: auto;
        height: auto;
      }

      .bio img {
        display: none;
      }

      .skills .wrapper {
        flex-direction: column;
      }

      #skills {
        width: auto;
      }
      .jobs header{
        flex-direction: column;
      }
      .jobs header >h3,
      .jobs header >h4,
      .jobs header >span {
        margin: 0;
      }
    }
  </style>
</head>

<body>
  <article>
    <section class="bio">
      <h1>张策</h1>
      <img src="QQ图片20230620173848.png" alt="" width="100" height="100">
      <p>
        男 | 30岁 | 前端开发工程师 | 沈阳
      </p>
      <p>
        手机：15542203520 | 微信：zc741555689 | 邮箱：741555689@qq.com
      </p>
      <p>
          <a href="https://www.yuque.com/jinmuzhu-0pwim/cygpl5/lgdw2r"><strong>个人博客</strong></a>
      </p>
    </section>






    <section class="projects">
      <h2>项目经历</h2>
      <ol>
        <li>
          <header>
            <h3>轱辘UI</h3>
            <span>
              <a href="http://zc-up.gitee.io/gulu-ui-zc-1/#/">项目预览</a>
            </span>
          </header>
          <p>
            一款基于 <strong>Vue3</strong> / <strong>TypeScript</strong> / <strong>Webpack</strong> 的 UI 框架。

          </p>
          <p>
            主要组件有开关、按钮、弹出框、<strong>标签页切换</strong>等。

          </p>
          <p>
            后续随着工作需要，会陆续添加更多组件，提高工作效率

          </p>
        </li>
        <li>
          <header>
            <h3>旺财随手记</h3>
            <span>
              <a href="https://gitee.com/zc-up/jizhang">源码预览</a>
              <a href="http://zc-up.gitee.io/suishouji/#/Money">项目预览</a>
            </span>
          </header>
          <p>
            这是一款基于<strong>Vue</strong>，<strong>TypeScript</strong>的移动端单页面应用
          </p>
          <p>
            这是为了验证自己一年的学习成果并且从自己和家人的需求出发，设计出的极简记账应用，特点是快速记账，
            而且可以通过查看统计了解平时的消费习惯。
          </p>
        </li>
        <li>
          <header>
            <h3>前航</h3>
            <span>
              <a href="http://zc-up.gitee.io/zizhidaohang">项目预览</a>
            </span>
          </header>
          <p>
            一个基于 <strong>jQuery</strong> 的单页面应用。
          </p>

          <p>
            由于市面上大部分导航页广告内容杂乱，解决个人需求，由本人自主设计出的导航页面，特点是页面简洁，
            而且可以支持自定义书签等等。
          </p>
        </li>
      </ol>
    </section>





    <section class="skills">
      <h2>技能</h2>
      <div class="wrapper">
        <div id="skills"></div>
        <ul>
          <li>熟悉页面制作技巧，能将设计稿<strong>完美还原</strong> </li>
          <li>熟悉<strong>前后端分离</strong>技术，包括 AJAX、跨域、前端路由、Cookie 等</li>
          <li>熟练掌握 <strong>Vue全家桶</strong>的使用，包括 VueCli、VueRouter、Vuex 等</li>
          <li>熟悉 React框架的使用，包括 create-react-app、ReactRouter 等</li>
          <li>熟悉 ES6，包括 let / Promise  / 析构赋值</li>
          <li>了解 <strong>TypeScript</strong> 的使用，我的项目就是 TS 实现的</li>
          <li>了解 <strong>Webpack 的配置和优化</strong></li>
        </ul>
      </div>
    </section>



    <section class="openSource">
      <h2>开源项目</h2>
      <ul>
        <li>
          <header>
            <h3>自己写的 DOM 库</h3>
            <a href="https://gitee.com/zc-up/dom/blob/master/src/dom.js">源码链接</a>
          </header>
          <p>检验学习成果，自学了dom后觉得window自带的太麻烦，自己实现了<strong>元素增，删，改，查</strong>等常见功能</p>
        </li>
        <li class="page2">
          <header>
            <h3>皮卡丘</h3>
            <span>
              <a href="https://gitee.com/zc-up/pikaqiu-css">源码链接</a>
              <a href="http://zc-up.gitee.io/pikaqiu-css/">项目预览</a>
            </span>
          </header>
          <p>这是我在学习 <strong>CSS3和动画</strong> 时制作的一个可爱作品</p>
        </li>
        <li>
          <header>
            <h3>简易画板</h3>
            <span>
              <a href="https://gitee.com/zc-up/canvas-huaban">源码链接</a>
              <a href="http://zc-up.gitee.io/canvas-huaban">项目预览</a>
            </span>
          </header>
          <p>我在学习 <strong>Canvas</strong> 时做的一个小作品</p>
          <p>点击鼠标左键，按住可以画图</p>
        </li>
      </ul>
    </section>



    <section class="others">

    </section>

    <section class="education">
      <h2>教育经历</h2>
      <p>
        <span><time>2012年</time>~<time>2015年</time></span>
        沈阳职业技术学校软件学院 电气自动化专业</p>
    </section>

  </article>
  <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
  <script src="./main.js"></script>
</body>

</html>
